define(['./../initial', './../service/prjStatusTimeLineChart', './../service/prjStatusChartModalHelper', './../service/createPrjStatusChart', './prjSlidesInside'], function() {
    var app = angular.module('App.prjStatus');
    app.directive('prjStatusChartModal', ['$rootScope', '$window', '$timeout', 'prjStatusTimeLineChart', 'prjStatusChartModalHelper', 'createPrjStatusChart', '$compile',
        function($rootScope, $window, $timeout, prjStatusTimeLineChart, prjStatusChartModalHelper, createPrjStatusChart, $compile) {
            return {
                restrict: 'A',
                scope: {
                    'markerCurPrj': "="
                },
                link: function(scope, el, attrs) {

                    var timeup = null; //定时加载图表的定时器
                    var chartContainer = $('#status-chart');
                    el.bind("$destroy", function() {
                        if (timeup) {
                            $timeout.cancel(timeup);
                        }
                    });

                    //**指示用户是否可以切换节点
                    scope.allowClick = false;
                    scope.curItem = null;

                    var curStatusTime = ''; //当前选择的时间
                    var prj = null; //当前的项目

                    function getCurItem(statusList, time) {
                        var sub = null;
                        var subIndex = -1,
                            pIndex = -1;
                        if (!time) {
                            var subList = statusList[statusList.length - 1].subItems;
                            pIndex = statusList.length - 1;
                            sub = subList[subList.length - 1];
                            subIndex = subList.indexOf(sub);
                        } else {
                            statusList.forEach(function(item, prjIndex) {
                                item.subItems.forEach(function(s, index) {
                                    if (s.endTime === time) {
                                        sub = s;
                                        subIndex = index;
                                        pIndex = prjIndex;
                                    }
                                });
                            });
                        }

                        if (pIndex > 0 && subIndex === 0 && !sub.lastTitle && !$rootScope.smallScreen) {
                            //设置曲线图表的title为  [上一个工况]-[本次工况]
                            sub.lastTitle = statusList[pIndex - 1].title;
                            sub.changes.forEach(function(change) {
                                change.curTime = sub.title + "(" + change.curTime + ")";
                                change.lastTime = sub.lastTitle + "(" + change.lastTime + ")";
                            });
                        }
                        return sub;
                    }

                    function initial() {
                        var div = document.getElementById('status-chart-container');
                        scope.chartContainer = angular.element(div).addClass('show');
                        prj = scope.markerCurPrj;

                        scope.curItem = getCurItem(prj.partitialStatusList);
                        curStatusTime = scope.curItem.endTime; //最后的时间
                        setWrapper();
                        prj.getStatusList(false).then(function() {
                            scope.allowClick = true;
                        });
                        //生成时间轴
                        var chartDiv = prjStatusTimeLineChart('status-chart', prj.partitialStatusList);
                        //scroll到最右边的最新时间去
                        chartContainer.scrollLeft(chartContainer[0].scrollWidth);
                    }


                    $rootScope.$on('statusItemClick', function(event, args) {
                        var clickedTime = args;
                        if (curStatusTime === clickedTime) return; //点击的还是当前工况节点
                        if (scope.allowClick === false) return; //还没加载其他节点的数据,不允许用户点击
                        if (timeup) { //取消图表加载的promise
                            $timeout.cancel(timeup);
                        }
                        curStatusTime = clickedTime;
                        scope.curItem = getCurItem(prj.statusList, curStatusTime);
                        setWrapper();
                    });



                    scope.imgUrls = [];
                    scope.isHorizontal = true;


                    var slidesContainer = $('#photo-slides-container');



                    var slidesHeight, slidesWidth;

                    function splitImagesToDisplay() {
                        scope.imgUrls = [];
                        var max, min;
                        if (slidesWidth > slidesHeight) {
                            max = slidesWidth;
                            min = slidesHeight;
                            scope.isHorizontal = true;
                        } else {
                            max = slidesHeight;
                            min = slidesWidth;
                            scope.isHorizontal = false;
                        }

                        var oneSlideImageCount = Math.round(max / (min * 1.32 + 20));

                        var count = 0,
                            item = [];



                        for (var i = 0; i < scope.curItem.imagesUrl.length; i++) {
                            item.push(scope.curItem.imagesUrl[i]);
                            count++;
                            if (count === oneSlideImageCount) {
                                scope.imgUrls.push(item);
                                count = 0;
                                item = [];
                            }
                        }
                        if (item.length > 0) {
                            scope.imgUrls.push(item);
                        }
                    }

                    $rootScope.$on('statusPhotoSlidesLoaded', function(event, args) {
                        scope.slidesjs = $('#photo-slides').slidesjs({
                            navigation: false,
                            pagination: false,
                            width: slidesWidth,
                            height: slidesHeight
                        });
                        //create chart in this time span
                        timeup = $timeout(function() {
                            scope.curItem.changes.forEach(function(item, index) {
                                var chartId = "chartSliderChild" + index;
                                createPrjStatusChart(chartId, item, slidesHeight, slidesWidth);
                            });
                            timeup = null;
                        }, 800);
                    });

                    function setWrapper() {
                        $timeout(function() {
                            var wrapperHeight = $('#status-chart-container').height() - $('#status-chart').height();
                            $('#status-chart-area').height(wrapperHeight);

                            slidesHeight = slidesContainer.height();
                            slidesWidth = slidesContainer.width();

                            //for better iamge display ,split images to be well fit in the container
                            splitImagesToDisplay();
                            //clear slides container
                            slidesContainer.empty();


                            var div = document.createElement('div');
                            div.setAttribute('data-prj-Slides-Inside', '');
                            div.setAttribute('class', 'slides');
                            div.id = 'photo-slides';
                            var element = angular.element(div);
                            slidesContainer.append(div);
                            $compile(element)(scope);
                        }, 100);
                    }

                    initial();

                    scope.close = function() {
                        prjStatusChartModalHelper.close();
                    };


                    scope.cansScrollChart = false; //能否scrollChart
                    scope.setChartMouseEnable = function() {
                        scope.cansScrollChart = true;
                    };
                    scope.setChartMouseDisable = function() {
                        scope.cansScrollChart = false;
                        oldLeft = null;
                    };
                    var oldLeft = null;
                    scope.timeLineScroll = function($event) {
                        if (!scope.cansScrollChart) return;

                        if (!oldLeft) {
                            oldLeft = $event.pageX;
                            return;
                        } else {
                            var targetLeft = $event.pageX;
                            var distant = oldLeft - targetLeft;
                            var currentLeft = chartContainer.scrollLeft();
                            chartContainer.scrollLeft(currentLeft + distant);
                            oldLeft = $event.pageX;
                            console.log('oldLeft is ', oldLeft);
                            console.log('currentLeft is ', currentLeft);
                            console.log('Move distance is ', distant);
                        }


                    };
                },
                templateUrl: 'partials/prjStatusChartModal.html'
            };
        }
    ]);
});
